<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content" style="margin-bottom: 1px">
            <el-row :gutter="4">
              <el-form
                :inline="true"
                label-position="left"
                class="demo-form-inline"
                label-width="59px"
              >
                <el-form-item label="关键字:">
                  <el-input
                    style="margin-right: 10px;width: 250px"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                  >
                    查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item class="clear_item-margin-bottom">
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newInteractive"
                  >
                    新增
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                label="名称"
                align="center"
                prop="name"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="服务ID"
                align="center"
                prop="serverId"
                width="300"
              ></el-table-column>
              <el-table-column
                label="服务地址"
                align="center"
                width="180"
                prop="apiUrl"
              ></el-table-column>
              <el-table-column
                label="文件服务地址"
                align="center"
                width="180"
                prop="fileUrl"
              ></el-table-column>
              <el-table-column label="用户类型" align="center" prop="type">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.type | keyText("SUPERIOR_ USER_TYPE")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="关联本系统用户"
                align="center"
                prop="relationUserName"
              ></el-table-column>
              <el-table-column
                label="本系统接收人数量"
                align="center"
                prop="receiveUserNumber"
              ></el-table-column>
              <el-table-column
                label="关联流程"
                align="center"
                prop="relationFlowName"
              ></el-table-column>
              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editInteractive(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delInteractive(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
            <el-dialog
              :visible.sync="addInteractiveStatus"
              v-if="addInteractiveStatus"
              title="新增/编辑交互设置:"
              width="40%"
              @close="fail"
            >
              <el-row>
                <el-col :span="24" class="mt20">
                  <el-form
                    ref="views"
                    :rules="rules"
                    :model="formInfo"
                    label-width="110px"
                  >
                    <el-form-item label="用户名称:" prop="name">
                      <el-input
                        placeholder="请输入用户名称"
                        v-model="formInfo.name"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="服务ID:" prop="serverId">
                      <el-input
                        placeholder="请输入服务ID"
                        v-model="formInfo.serverId"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="服务地址:" prop="apiUrl">
                      <el-input
                        placeholder="请输入服务地址"
                        v-model="formInfo.apiUrl"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="文件服务地址:" prop="fileUrl">
                      <el-input
                        placeholder="请输入文件服务地址"
                        v-model="formInfo.fileUrl"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="用户类型:" prop="type">
                      <el-select
                        v-model="formInfo.type"
                        placeholder="请选择用户类型"
                        @change="changeType"
                      >
                        <el-option
                          v-for="item in userType"
                          :key="item.keyword"
                          :label="item.label"
                          :value="item.keyword"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      label="关联用户:"
                      prop="relationUserUqId"
                      v-if="formInfo.type !== 'SEND'"
                    >
                      <user-select
                        @getUser="getRelationUser"
                        v-model="formInfo.relationUserUqId"
                      ></user-select>
                    </el-form-item>

                    <!--                    <el-form-item label="接收人员:" prop="receiveUserUqIds">-->
                    <!--                      <user-select-->
                    <!--                        @getUser="getReceiveUser"-->
                    <!--                        isMulSelect-->
                    <!--                        v-model="formInfo.receiveUserUqIds"-->
                    <!--                      ></user-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item
                      label="关联流程:"
                      prop="relationFlowId"
                      v-if="formInfo.type !== 'RECEIVE'"
                    >
                      <el-cascader
                        :props="setProperty"
                        v-model="formInfo.relationFlowId"
                        @change="changeFlow"
                        :options="options"
                        :show-all-levels="false"
                      ></el-cascader>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <div slot="footer">
                <el-button type="primary" @click="saveInteractive">
                  确认
                </el-button>
                <el-button @click="fail">
                  取消
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
export default {
  name: "interactiveSetting",
  created() {
    this.getPageData();
    this.getWorkflowTreeF();
  },
  data() {
    return {
      setProperty: {
        children: "list",
        label: "name",
        value: "id"
      },
      searchDto: {
        keywords: "",
        pageIndex: "",
        pageSize: 10
      },
      userType: this.getDictionary("SUPERIOR_USER_TYPE"), // ! old bug is this: SUPERIOR_ USER_TYPE
      pageData: {},
      loading: false,
      formInfo: {},
      rules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        serverId: [
          { required: true, message: "请输入服务ID", trigger: "blur" }
        ],
        apiUrl: [
          { required: true, message: "请输入服务地址", trigger: "blur" }
        ],
        fileUrl: [
          { required: true, message: "请输入文件服务地址", trigger: "blur" }
        ],
        type: [
          { required: true, message: "请选择有用户类型", trigger: "blur" }
        ],
        relationUserUqId: [
          { required: true, message: "请选择关联用户", trigger: "blur" }
        ],
        // receiveUserUqIds: [
        //   { required: true, message: "请选择接收人员", trigger: "blur" }
        // ],
        relationFlowId: [
          { required: true, message: "请选择关联流程", trigger: "blur" }
        ]
      },
      addInteractiveStatus: false,
      options: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    changeType(val) {
      if (val == "SEND") {
        this.formInfo.relationUserUqId = "";
        this.formInfo.relationUserId = "";
        this.formInfo.relationUserName = "";
      } else if (val == "RECEIVE") {
        this.formInfo.relationFlowId = "";
        this.formInfo.relationFlowName = "";
      }
    },
    //获取流程树状结构
    getWorkflowTreeF() {
      this.API.getWorkflowTree().then(res => {
        this.options = res.data;
      });
    },
    getRelationUser(val) {
      this.formInfo.relationUserId = val.origId;
      this.formInfo.relationUserName = val.userNames;
    },
    changeFlow(val) {
      let obj = this.options
        .find(item => item.id == val[0])
        .list.find(args => args.id == val[1]);
      this.formInfo.relationFlowName = obj.name;
    },
    // getReceiveUser(val) {
    //   this.formInfo.receiveUserIds = val.origId;
    //   this.formInfo.receiveUserUqNames = val.userNames;
    // },
    //新增/编辑确认
    saveInteractive() {
      this.$refs["views"].validate(valid => {
        if (valid) {
          if (Array.isArray(this.formInfo.relationFlowId)) {
            this.formInfo.relationFlowId =
              this.formInfo.relationFlowId === null
                ? 0
                : this.formInfo.relationFlowId[
                    this.formInfo.relationFlowId.length - 1
                  ];
          }
          let tem = { body: this.formInfo };
          this.API.addOrUpdateOtherSetting(tem).then(() => {
            this.success("操作成功");
            this.getPageData();
            this.fail();
          });
        }
      });
    },
    fail() {
      this.formInfo = {};
      this.addInteractiveStatus = false;
    },
    search() {
      this.getPageData(1);
    },
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        keywords: ""
      };
      this.getPageData(1);
    },
    //获取分页
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getOtherSettingPageList(tem).then(ret => {
        this.pageData = ret.data;
        this.pageData.records.map(item => {
          this.$set(
            item,
            "receiveUserNumber",
            item.receiveUserUqNames.split(",").length
          );
        });
      });
    },
    //新增
    newInteractive() {
      this.addInteractiveStatus = true;
    },
    //编辑
    editInteractive(row) {
      this.API.getOtherSettingById({ id: row.id }).then(ret => {
        this.formInfo = ret.data;
      });
      this.addInteractiveStatus = true;
    },
    //删除
    delInteractive(row) {
      this.$confirm("确认删除当前数据?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteOtherSettingById(tem).then(() => {
            this.success("删除成功");
            this.getPageData();
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped></style>
